<template>
	<view class="modal">
		<view class="select">
			<view class="title">
				<view class="title-item" :class="active === 'province' ? 'active' : ''" @click="changeActive('province')">{{ pName }}</view>
				<view class="title-item" :class="active === 'city' ? 'active' : ''" @click="changeActive('city')">{{ cName }}</view>
				<view class="title-item" :class="active === 'area' ? 'active' : ''" @click="changeActive('area')">{{ aName }}</view>
				<view class="title-item" :class="active === 'street' ? 'active' : ''" @click="changeActive('street')">{{ sName }}</view>
			</view>
			<view class="list">
				<scroll-view v-if="active === 'province'" scroll-y>
					<view v-for="item in provinceList" :key="item.code" @click="changeP(item)">{{ item.name }}</view>
				</scroll-view>
				<scroll-view v-if="active === 'city'" scroll-y>
					<view v-for="item in cityList" :key="item.code" @click="changeC(item)">{{ item.name }}</view>
				</scroll-view>
				<scroll-view v-if="active === 'area'" scroll-y>
					<view v-for="item in areaList" :key="item.code" @click="changeA(item)">{{ item.name }}</view>
				</scroll-view>
				<scroll-view v-if="active === 'street'" scroll-y>
					<view v-for="item in streetList" :key="item.code" @click="changeS(item)">{{ item.name }}</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { getAddress} from "@/api/config.js"

export default {
	name: 'address-select',
	props: {
		data: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			active: 'province',
			pCode: '',
			pName: '--',
			cCode: '',
			cName: '--',
			aCode: '',
			aName: '--',
			sCode: '',
			sName: '--',
			provinceList: [],
			cityList: [],
			areaList: [],
			streetList: []
		};
	},
	mounted() {
		this.setData()
	},
	methods: {
		setData() {
			this.pCode = this.data.province;
			this.cCode = this.data.city;
			this.aCode = this.data.area;
			this.sCode = this.data.street;
			this.pName = this.data.provinceName;
			this.cName = this.data.cityName;
			this.aName = this.data.areaName;
			this.sName = this.data.streetName;
			this.getAddress();
		},
		changeActive(val) {
			console.log('类型切换', val);
			this.active = val;
		},
		async getAddress() {
			this.provinceList = await getAddress();
			if (!this.pCode) return;
			this.cityList = await getAddress({ province: this.pCode });
			if (!this.cCode) return;
			this.areaList = await getAddress({ province: this.pCode, city: this.cCode });
			if (!this.aCode) return;
			this.streetList = await getAddress({ province: this.pCode, city: this.cCode, area: this.aCode });
		},
		changeP(val) {
			console.log('选择了省', val);
			this.pName = val.name;
			this.pCode = val.code;
			this.cityList = [];
			this.areaList = [];
			this.streetList = [];
			this.cName = '--';
			this.cCode = '';
			this.aName = '--';
			this.aCode = '';
			this.sName = '--';
			this.sCode = '';
			this.active = 'city';
			getAddress({ province: this.pCode }).then(res => {
				console.log('加载结果', res);
				this.cityList = res;
			});
		},
		changeC(val) {
			console.log('选择了市', val);
			this.cName = val.name;
			this.cCode = val.code;
			this.areaList = [];
			this.streetList = [];
			this.aName = '--';
			this.aCode = '';
			this.sName = '--';
			this.sCode = '';
			this.active = 'area';
			getAddress({ province: this.pCode, city: this.cCode }).then(res => {
				this.areaList = res;
			});
		},
		changeA(val) {
			console.log('选择了区', val);
			this.aName = val.name;
			this.aCode = val.code;
			this.streetList = [];
			this.sName = '--';
			this.sCode = '';
			this.active = 'street';
			getAddress({ province: this.pCode, city: this.cCode, area: this.aCode }).then(res => {
				this.streetList = res;
			});
		},
		changeS(val) {
			console.log('选择了街道', val);
			this.sName = val.name;
			this.sCode = val.code;
			const data = {
				province: this.pCode,
				city: this.cCode,
				area: this.aCode,
				street: this.sCode,
				provinceName: this.pName,
				cityName: this.cName,
				areaName: this.aName,
				streetName: this.sName
			};
			console.log('回调数据', data);
			this.$emit('change', data);
		}
	}
};
</script>

<style lang="scss" scoped>
.modal {
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 1000;
	.select {
		position: fixed;
		bottom: 0;
		top: 30vh;
		left: 0;
		right: 0;
		height: 70vh;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
		flex-direction: column;
	}
}

.title {
	margin-top: 20rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	width: 100%;
	height: 60rpx;
	display: flex;

	.title-item {
		min-width: 100rpx;
		text-align: center;
		margin-right: 10rpx;
	}

	.active {
		border-bottom: 6rpx solid #00b7ff;
	}
}
.list {
	flex: 1;
	margin-left: 20rpx;
	scroll-view {
		height: calc(70vh - 80rpx);
		view {
			height: 50rpx;
			line-height: 50rpx;
		}
	}
}
</style>
